<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>新增保养项</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="cancel">返回</el-button>
      </div>

      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="保养项名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入保养项名称" />
        </el-form-item>

        <el-form-item label="适用设备类型" prop="equipmentTypeId">
          <el-select v-model="form.equipmentTypeId" placeholder="请选择设备类型" clearable>
            <el-option
              v-for="item in equipmentTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="保养内容" prop="content">
          <el-input v-model="form.content" type="textarea" rows="3" placeholder="请输入保养内容" />
        </el-form-item>

        <el-form-item label="标准" prop="standard">
          <el-input v-model="form.standard" placeholder="请输入保养标准" />
        </el-form-item>

        <el-form-item label="保养周期(天)" prop="cycle">
          <el-input-number v-model="form.cycle" :min="1" :max="365" />
        </el-form-item>

        <el-form-item label="所需工具" prop="tools">
          <el-input v-model="form.tools" placeholder="请输入所需工具" />
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { addMaintenanceConfig, getEquipmentTypeList } from '@/api/sb/maintenanceConfig'

export default {
  name: 'AddMaintenanceConfig',
  data() {
    return {
      // 表单参数
      form: {
        name: '',
        equipmentTypeId: null,
        content: '',
        standard: '',
        cycle: 30,
        tools: '',
        remark: ''
      },
      // 设备类型选项
      equipmentTypeOptions: [],
      // 表单校验
      rules: {
        name: [
          { required: true, message: '保养项名称不能为空', trigger: 'blur' }
        ],
        equipmentTypeId: [
          { required: true, message: '请选择设备类型', trigger: 'change' }
        ],
        content: [
          { required: true, message: '保养内容不能为空', trigger: 'blur' }
        ],
        cycle: [
          { required: true, message: '保养周期不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getEquipmentTypes()
  },
  methods: {
    /** 获取设备类型列表 */
    getEquipmentTypes() {
      getEquipmentTypeList().then(response => {
        const typeList = response.rows || response.data || [];
        this.equipmentTypeOptions = typeList.map(item => {
          return {
            value: item.typeId,
            label: item.typeName
          };
        });
      }).catch(error => {
        console.error("获取设备类型列表失败", error);
        this.equipmentTypeOptions = [];
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addMaintenanceConfig(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.cancel();
          });
        }
      });
    },
    /** 取消按钮 */
    cancel() {
      this.$router.push({ path: "/sb/Maintenance-configuration" });
    }
  }
}
</script> 